<template>
  <PageWrapDrawer
:show="show" :isUpdate="props.isUpdate" 
  @success="onSubmit" 
  @on-drawer-close="onClose">
    <Form
name="basic"
          :model="insideData.data"
          :label-col="{ span: 6 }"
          :wrapper-col="{ span: 18 }"
          autocomplete="off"
          layout="horizontal">
      <a-row>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="角色名称" name="name" v-bind="validateInfos['data.name']">
            <a-input v-model:value="insideData.data.name"/>
          </FormItem>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
          <FormItem label="启用" name="enable">
            <a-radio-group v-model:value="insideData.data.enable">
              <a-radio :value="1">启用</a-radio>
              <a-radio :value="2">禁用</a-radio>
            </a-radio-group>
          </FormItem>
        </a-col>
        <a-col span="24">
          <FormItem
label="备注" name="memo"
          :label-col="{ xs: {span: 6}, sm: {span: 6}, md: {span: 6}, lg: {span: 6}, xl: {span: 3}, xxl: {span: 3} }"
          :wrapper-col="{ xs: {span: 16}, sm: {span: 16}, md: {span: 16}, lg: {span: 16}, xl: {span: 20}, xxl: {span: 20} }"
          >
            <a-textarea
v-model:value="insideData.data.memo" 
            :auto-size="{ minRows: 3, maxRows: 3, }"
            placeholder="备注一下..."/>
          </FormItem>
        </a-col>
      </a-row>
    </Form>
  </PageWrapDrawer>
</template>
<script lang="ts" name="roleDrawer" setup>
import {
Form,
FormItem,
} from 'ant-design-vue';
import { reactive, toRaw, watch } from 'vue';
import { create, update } from '/@/api/admin/role';
import { PageWrapDrawer } from '/@/components/PageWrapDrawer';
import { useMessage } from '/@/hooks/web/useMessage';


// https://blog.csdn.net/qq_49327308/article/details/124467691
const {createMessage,} = useMessage();
const {info, success, warning, error} = createMessage;

const emit = defineEmits(['on-success', 'on-drawer-close'])
const props = defineProps({
    show: Boolean,
    isUpdate: Boolean,
    row: {type: [Object, null] as PropType<Object | null>, default: null,},
})

const useForm = Form.useForm;
const insideData = reactive({
  data: {
    ID: null,
    name: '',
    enable: 1,
    memo: '',
  }
});

watch(() => props.row, (v1, _) => {
  if (v1) {
    insideData.data.ID = v1.ID || null
    insideData.data.name = v1.name
    insideData.data.memo = v1.memo
  }
})

const rulesRef = reactive({
  'data.name': [
    {required: true, message: '请输入名称',},
  ],
});
const {resetFields, validate, validateInfos} = useForm(insideData, rulesRef, {
  onValidate: (...args) => {
    // console.log('args=>', ...args)
  },
});

const onSubmit = () => {
  validate()
    .then(async () => {
      let data = toRaw(insideData.data)
      if (props.isUpdate) {
        await update(data).then(() => {
          onClose()
        })
      } else {
        await create(data).then(() => {
          onClose()
        })
      }
      emit('on-success')
    })
}

const onClose = () => {
  Object.assign(insideData, {data: {}});
  resetFields();
  emit('on-drawer-close');
};

</script>
